<template>
  <NavBarVue :title="'编辑资料'"/>
  <view class="editBox">
    <u-toast ref="uToastRef"></u-toast>
    <view class="list">
      <view class="list_li" v-for="item in list" :key="item.id">
        <view style="font-weight: bold;">{{item.title}}</view>
        <view class="li_right">
          <view
              style="width: 50px;height: 50px;position: absolute;right: 40rpx;"
              v-if='item.id === "userNickPicture"'
          >
            <UploadFileVue :imgUrl="userStore?.userInfo?.userInfos[item.id]"/>
            <!-- <BaseCoverImage :src="userStore?.userInfo?.userInfos[item.id]" /> -->
          </view>
          <input
              v-else
              style="text-align: right;padding-right: 10rpx;"
              type="text"
              :value="item.id !== 'regTime' ? userStore?.userInfo?.userInfos[item.id] : regTime"
              @change="onInput($event,item.id)"
          />
          <u-icon name="arrow-right" color="#aaa" size="17"></u-icon>
        </view>
      </view>
    </view>
    <view class="editBtn" @click="saveUserInfo">
      保存
    </view>
  </view>
</template>

<script setup>
import {
  onMounted,
  ref,
  computed
} from 'vue'
import {
  useUserStore
} from '../../../store'
import NavBarVue from '../../../components/NavBar.vue';
import dayjs from 'dayjs';

const uToastRef = ref(null)
const userStore = useUserStore()
const list = ref([{
  id: 'userNickPicture',
  title: '头像',
},
  {
    id: 'nickName',
    title: '昵称',
  },
  {
    id: 'introduction',
    title: '简介',
  },
  {
    id: 'ipAddress',
    title: '地区',
  },
  {
    id: 'regTime',
    title: '生日',
  },
])

function showToast(params) {
  uToastRef.value.show({
    ...params,
    complete() {
      params.url && uni.switchTab({
        url: params.url
      });
    }
  });
}

// 修改用户信息
const saveUserInfo = async () => {
  const res = await userStore.saveUserInfo(userStore.userInfo.userInfos)
  await userStore.getUserDetail()
  let showMessage = {
    iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png',
    duration: 500,
    url: '/pages/tab-mine/index'
  }
  if (res.code === '0') {
    showMessage = {
      type: 'success',
      message: "用户信息编辑成功",
      ...showMessage
    }
  } else {
    showMessage = {
      type: 'error',
      message: "用户信息编辑失败",
      ...showMessage
    }
  }
  showToast(showMessage)
}
onMounted(async () => {
  await userStore.getUserDetail()
})

let regTime = computed(() => {
  return dayjs(userStore?.userInfo?.userInfos['regTime']).format('MM.DD') // '25/01/2019'
})

const onInput = (e, id) => {
  userStore.userInfo.userInfos[id] = e.target.value
}
</script>

<style scoped>
.editBox {
  padding: 0px 25px;
  position: relative;
}

.list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.list_li {
  width: 100%;
  height: 70px;
  /* background: sandybrown; */
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.li_right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.editBtn {
  width: 90%;
  height: 50px;
  background: linear-gradient(to right, rgb(255, 79, 102), rgb(252, 106, 124));
  border-radius: 10px;
  position: fixed;
  bottom: 30px;
  left: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eee;
}
</style>